<template>
  <div>
    <Header :config="config"></Header>
    <Navigation :config="config"></Navigation>
    <div class="khal-crumb" style="padding-top: 19px;">
      <div class="kc-center">
        <div class="kcc-list">
          <a v-for="(item,index) in crumbs" :key="index" :href="item.href ? item.href : 'javascript:void(0);'" class="kccl-a" :class="item.href ? '' : 'noafter'">{{ item.title }}</a>
        </div>
      </div>
    </div>
    <div class="khalxq-content">
      <div class="kc-center">
        <div class="kcc-left">
          <div class="kcc-title">{{ infoData.caseDetail.title }}</div>
          <div class="kcc-content" v-html="infoData.caseDetail.content"></div>
        </div>
        <div class="kcc-right">
          <div class="r-type">
            <div class="rt-title">
              <i class="icon"></i>
              <p class="text">案例城市</p>
            </div>
            <div class="rt-list">
              <a v-for="item in screenCityData" :key="item.id" target="_blank" :href="item.href" :title="item.cityName" class="rtl-a">{{ item.cityName }}</a>
            </div>
          </div>
          <div class="r-type mt20">
            <div class="rt-title">
              <i class="icon"></i>
              <p class="text">案例类别</p>
            </div>
            <ul class="rt-ul">
              <li class="rtu-li" v-for="item in screenTypeData" :key="item.id">
                <a target="_blank" :href="item.href" :title="item.typeName">
                  <p class="text">{{ item.typeName }}</p>
                  <i class="icon">&gt;</i>
                </a>
              </li>
            </ul>
          </div>
          <div class="r-type mt20">
            <div class="rt-title">
              <i class="icon"></i>
              <p class="text">在线留言</p>
            </div>
            <form class="rt-form">
              <input class="f-input" type="text" v-model="fullName" placeholder="请输入您的姓名">
              <input class="f-input" type="text" v-model="phone" maxlength="11" placeholder="请输入您的电话">
              <textarea class="f-textarea" v-model="content" placeholder="请简单描述您的需求"></textarea>
              <button type="button" class="f-save" :disabled="formDisabled" @click="formSave">立即提交</button>
            </form>
          </div>
        </div>
      </div>
    </div>
    <div class="khalxq-relevant">
      <div class="kr-center">
        <div class="krc-title">
          <div class="text">{{ infoData.caseDetail.newsTypeAliases ? '相关新闻资讯' : '更多新闻资讯' }}</div>
          <a :href="`${config.domain}/xwzx/${infoData.caseDetail.newsTypeAliases ? infoData.caseDetail.newsTypeAliases+'/' : ''}`" class="more">更多>></a>
        </div>
        <ul class="krc-ul">
          <li class="krcu-li" v-for="item in relevantNewsData" :key="item.id">
            <a target="_blank" :href="item.href" class="cover" :title="item.title">
              <img :src="item.images" :alt="item.title">
            </a>
            <div class="item">
              <div class="i-title">
                <a target="_blank" :href="item.href" :title="item.title">{{ item.title }}</a>
              </div>
              <div class="i-desc">
                <a target="_blank" :href="item.href" :title="item.subtitle">{{ item.subtitle }}</a>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <Footer :config="config"></Footer>
  </div>
</template>

<script>
var title = ''
var description = ''
var keywords = ''
import u from '@/plugins/public'
export default {
  validate(ctx) {
    return /^\d+\.html/.test(ctx.params.id)
  },
  async asyncData(ctx) {
    // 设置导航选中
    ctx.config.navData[5].on = true

    // 面包屑
    var crumbs = [{
      title: '纺扬科技',
      href: `${ctx.config.domain}/`
    }, {
      title: '客户案例',
      href: `${ctx.config.domain}/khal/`
    }]

    // 筛选城市数据
    var screenCityData = []
    let getCity = await u.http({
      url: ctx.store.state.queryCaseCityList,
      params: {
        pageSize: 100
      }
    })
    if (getCity.code == 200) {
      screenCityData = getCity.data.list
      screenCityData.forEach(item => {
        item.href = `${ctx.config.domain}/khal/${item.cityAliases}/`
      })
    }

    // 筛选类型数据
    var screenTypeData = []
    let getType = await u.http({
      url: ctx.store.state.queryCaseTypeList
    })
    if (getType.code == 200) {
      screenTypeData = getType.data.list
      screenTypeData.forEach(item => {
        item.href = `${ctx.config.domain}/khal/${item.typeAliases}/`
      })
    }

    // 获取详情
    let id = ctx.params.id ? ctx.params.id.split('.html')[0] : ''
    var infoData = {
      caseDetail: {
        cityName: '',
        caseTypeName: '',
        cityCode: '',
        id: '',
        title: '',
        content: '',
        caseType: ''
      },
      upperCase: null,
      nextCase: null
    }
    let getInfo = await u.http({
      url: ctx.store.state.queryCaseById,
      params: {
        id
      }
    })
    if (getInfo.code == 200) {
      if (getInfo.data.caseDetail) {
        infoData.caseDetail = getInfo.data.caseDetail
        crumbs.push({
          title: infoData.caseDetail.caseTypeName,
          href: `${ctx.config.domain}/khal/${infoData.caseDetail.caseTypeAliases}/`
        }, {
          title: infoData.caseDetail.title,
          href: ''
        })
      }
      infoData.upperCase = getInfo.data.upperCase ? getInfo.data.upperCase : null
      infoData.nextCase = getInfo.data.nextCase ? getInfo.data.nextCase : null
    }

    // 获取相关新闻资讯
    var relevantNewsData = []
    let getRelevantNews = await u.http({
      url: ctx.store.state.queryNewsList,
      params: {
        pageNum: 1,
        pageSize: 12,
        caseTypeAliases: infoData.caseDetail.caseTypeAliases
      }
    })
    if (getRelevantNews.code == 200) {
      relevantNewsData = getRelevantNews.data.list
      relevantNewsData.forEach(item => {
        item.href = `${ctx.config.domain}/xwzxxq/${item.id}.html`
      })
    }

    // TDK
    title = `${infoData.caseDetail.title}-纺扬网站建设`
    keywords = '网站制作,网站开发,网站设计,纺扬网站建设'

    return {
      config: ctx.config,
      crumbs,
      screenCityData,
      screenTypeData,
      infoData,
      relevantNewsData
    }
  },
  head() {
    return {
      title,
      meta: [
        { hid: 'description', name: 'description', content: description },
        { hid: 'keywords', name: 'keywords', content: keywords }
      ]
    }
  },
  data() {
    return {
      fullName: '',
      phone: '',
      weChat: '',
      demand: '',
      budget: '',
      content: '',
      formDisabled: false
    }
  },
  methods: {
    // 表单提交
    formSave() {
      if (this.phone == '') {
        this.$message({
          message: '请输入您的电话号码',
          type: 'warning'
        })
        return false
      }
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        this.$message({
          message: '您的号码格式有误',
          type: 'warning'
        })
        return false
      }
      this.formDisabled = true
      this.$axios({
        url: this.$store.state.addMessageBoard,
        method: 'POST',
        headers: {
          'Content-Type':'application/x-www-form-urlencoded'
        },
        params: {
          fullName: this.fullName,
          phone: this.phone,
          weChat: this.weChat,
          demand: this.demand,
          budget: this.budget,
          content: this.content,
          ip: this.config.ip,
          pathUrl: this.config.domain + this.$route.fullPath
        }
      }).then(({ data }) => {
        if (data.code == 200) {
          this.$message({
            message: data.msg,
            type: 'success'
          })
          this.fullName = ''
          this.phone = ''
          this.weChat = ''
          this.demand = ''
          this.budget = ''
          this.content = ''
          this.formDisabled = false
          return false
        }
        this.$message({
          message: data.msg,
          type: 'error'
        })
        this.formDisabled = false
      }).catch(err => {
        this.$message({
          message: err,
          type: 'error'
        })
        this.formDisabled = false
      })
      return false
    }
  }
}
</script>

<style>
  body {
    background-color: #f5f5f5;
  }
</style>